import {PageContainer} from "@ant-design/pro-layout";
import React, {useRef, useEffect} from 'react';
import {Menu} from 'antd';
import type {ActionType} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {getPerson} from '@/services/person'
import {connect} from 'umi'

const columns = [
    {
        title: "姓名",
        dataIndex: "name",
    },
    {
        title: "年龄",
        dataIndex: "age",
        hideInSearch: true,
    }
];


const menu = (
    <Menu>
        <Menu.Item key="1">1st item</Menu.Item>
        <Menu.Item key="2">2nd item</Menu.Item>
        <Menu.Item key="3">3rd item</Menu.Item>
    </Menu>
);

//发请求获取数据 直接发送请求
// const personList = async () => {
// const data = await getPerson();
// console.log(data)
// return {data};
// }


const Person = (props) => {
    const actionRef = useRef<ActionType>();

    const {dispatch, person: {persons}} = props;

    console.log(props)

    //只在组件渲染的时候才执行
    useEffect(() => {
        //调用models
        dispatch({
            type: 'person/fetchPersons',
            payload: null,
        })
    }, [])

    // const personList = async () => {
    //     const data = props.person.persons;
    //     return {data};
    // }

    return (
        <PageContainer>
            <ProTable
                columns={columns}
                actionRef={actionRef}
                dataSource={persons}
                // request={async (params = {}) => personList()}
                editable={{
                    type: 'multiple',
                }}
                columnsState={{
                    persistenceKey: 'pro-table-singe-demos',
                    persistenceType: 'localStorage',
                }}
                rowKey="id"
                search={{
                    labelWidth: 'auto',
                }}
                form={{
                    // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
                    syncToUrl: (values, type) => {
                        if (type === 'get') {
                            return {
                                ...values,
                                created_at: [values.startTime, values.endTime],
                            };
                        }
                        return values;
                    },
                }}
                pagination={{
                    pageSize: 5,
                }}
                dateFormatter="string"
                headerTitle="高级表格"
            />
        </PageContainer>
    );
};

// const mapStateToProps = ({persons}) => ({persons})


export default connect(({person}) => ({person}))(Person);